<template>
  <div class="app-container" style="overflow: scroll">
    <div style="width: 1024px;margin: 0 auto">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="160px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发起参与机构号" prop="sender">
            <el-input v-model="submitParams.sender" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="发起参与机构名称" prop="senderName">
            <el-input v-model="submitParams.senderName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="接收参与机构号" prop="recver">
            <el-input v-model="submitParams.recver" @change="checkbankcode('recver')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('recver')">
            行名行号查询
          </el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="接收参与机构名称" prop="recverName">
            <el-input v-model="submitParams.recverName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="出票日期" prop="dftDate">
            <el-date-picker v-model="submitParams.dftDate" style="width: 100%" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="汇票种类" prop="dftCtgy">
            <el-select v-model="submitParams.dftCtgy" clearable placeholder="汇票种类" style="width: 100%">
              <el-option
                v-for="dict in dictMap.DFT_CTGY"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="汇票号码" prop="dftNo">
            <el-input v-model="submitParams.dftNo" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="汇票密押" prop="dftKey">
            <el-input v-model="submitParams.dftKey" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="汇票签发行行号" prop="dftSndBrno">
            <el-input v-model="submitParams.dftSndBrno" @change="checkbankcode('dftSndBrno')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('dftSndBrno')">
            行名行号查询
          </el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="汇票签发行行名" prop="dftSndName">
            <el-input v-model="submitParams.dftSndName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="汇票收款人名称" prop="dftPayerName">
            <el-input v-model="submitParams.dftPayerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="最后持票人开户行行号" prop="dftOwnerAccBrno">
            <el-input v-model="submitParams.dftOwnerAccBrno" @change="checkbankcode('dftOwnerAccBrno')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('dftOwnerAccBrno')">
            行名行号查询
          </el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="最后持票人开户行行名" prop="dftOwnerAccName">
            <el-input v-model="submitParams.dftOwnerAccName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="最后持票人账号" prop="dftOwnerActno">
            <el-input v-model="submitParams.dftOwnerActno" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="最后持票人名称" prop="dftOwnerName">
            <el-input v-model="submitParams.dftOwnerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="出票金额币种" prop="curcd">
            <el-input v-model="submitParams.curcd" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="出票金额" prop="dftAmount">
            <ht-amount-input v-model="submitParams.dftAmount" placeholder="出票金额"></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="实际结算金额货币类型" prop="dftStAmtCurcd">
            <el-input v-model="submitParams.dftStAmtCurcd" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="实际结算金额" prop="dftStAmt">
            <ht-amount-input v-model="submitParams.dftStAmt" placeholder="实际结算金额"></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="多余金额货币类型" prop="dftOverAmtCurcd">
            <el-input v-model="submitParams.dftOverAmtCurcd" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="多余金额" prop="dftOverAmt">
            <ht-amount-input v-model="submitParams.dftOverAmt" placeholder="实际结算金额"></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="提示付款日期" prop="dftPaymentDate">
            <el-date-picker
              v-model="submitParams.dftPaymentDate"
              style="width: 100%"
              type="date"
              value-format="yyyyMMdd"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks" maxlength="256" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :offset="6" :span="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="loading">提 交</el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    </div>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput";
import { mapGetters } from "vuex";
import { applicationCityCommercialBankdraftEntrySave } from "@/api/cnaps/hvps/151";
import { milliSendToDate } from "@/utils/common";

export default {
  name: "ApplicationCityCommercialBankdraftEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput, BankBranchDialog },
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  created() {
    this.$set(this.submitParams, "sender", this.globalBusData.cnapsBrno);
    this.$set(this.submitParams, "senderName", this.globalBusData.cnapsBrname);
    this.$set(this.submitParams, "dftDate", milliSendToDate(new Date()));
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "sender", val.cnapsBrno);
        this.$set(this.submitParams, "senderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 录入参数
      submitParams: {
        sender: undefined,
        senderName: undefined,
        recver: undefined,
        recverName: undefined,
        dftDate: undefined,
        dftCtgy: undefined,
        dftNo: undefined,
        dftKey: undefined,
        dftSndBrno: undefined,
        dftSndName: undefined,
        dftPayerName: undefined,
        dftOwnerAccBrno: undefined,
        dftOwnerAccName: undefined,
        dftOwnerActno: undefined,
        dftOwnerName: undefined,
        curcd: "CNY",
        dftAmount: undefined,
        dftStAmtCurcd: "CNY",
        dftStAmt: undefined,
        dftOverAmtCurcd: "CNY",
        dftOverAmt: undefined,
        dftPaymentDate: undefined,
        remarks: undefined,
      },

      loading: false,
      //
      searchFormDictList: ["DFT_CTGY"],

      rules: {
        sender: [{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        senderName: [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        recver: [
          { required: true, message: "请输入接收参与机构号", trigger: ['blur', 'change'] },
          { max: 14, message: "长度最大为14位", trigger: "blur" },
        ],
        recverName: [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        dftDate: [{ required: true, message: "请输入出票日期", trigger: "blur" }],
        dftCtgy: [{ required: true, message: "请输入汇票种类", trigger: "blur" }],
        dftNo: [
          { required: true, message: "请输入汇票号码", trigger: "blur" },
          { max: 32, message: "长度最大为32位", trigger: "blur" },
        ],
        dftKey: [
          { required: true, message: "请输入汇票密押", trigger: "blur" },
          { max: 10, message: "长度最大为10位", trigger: "blur" },
        ],
        dftSndBrno: [
          { required: true, message: "请输入汇票签发行行号", trigger: ['blur', 'change'] },
          { max: 14, message: "长度最大为14位", trigger: "blur" },
        ],
        dftSndName: [
          { required: true, message: "请输入汇票签发行行名", trigger: "blur" },
          { max: 60, message: "长度最大为60位", trigger: "blur" },
        ],
        dftPayerName: [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        dftOwnerAccBrno: [
          { required: true, message: "请输入最后持票人开户行行号", trigger: ['blur', 'change'] },
          { max: 14, message: "长度最大为14位", trigger: "blur" },
        ],
        dftOwnerAccName: [
          { required: true, message: "请输入最后持票人开户行行名", trigger: "blur" },
          { max: 60, message: "长度最大为60位", trigger: "blur" },
        ],
        dftOwnerActno: [
          { required: true, message: "请输入最后持票人账号", trigger: "blur" },
          { max: 32, message: "长度最大为32位", trigger: "blur" },
        ],
        dftOwnerName: [
          { required: true, message: "请输入最后持票人名称", trigger: "blur" },
          { max: 60, message: "长度最大为60位", trigger: "blur" },
        ],
        curcd: [{ max: 3, message: "长度最大为3位", trigger: "blur" }],
        dftAmount: [{ required: true, message: "请输入出票金额", trigger: "blur" }],
        dftStAmtCurcd: [{ max: 3, message: "长度最大为3位", trigger: "blur" }],
        dftStAmt: [{ required: true, message: "请输入实际结算金额", trigger: "blur" }],
        dftOverAmtCurcd: [{ max: 3, message: "长度最大为3位", trigger: "blur" }],
        dftOverAmt: [{ required: true, message: "请输入多余金额", trigger: "blur" }],
        dftPaymentDate: [{ required: true, message: "请输入提示付款日期", trigger: "blur" }],
        remarks: [{ max: 256, message: "长度最大为256位", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          applicationCityCommercialBankdraftEntrySave(this.submitParams)
            .then((response) => {
              this.msgSuccess("录入成功");
              this.refresh();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      console.log(this.globalBusData);
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "recver") {
        this.$set(this.submitParams, "recver", row.bankCode);
        this.$set(this.submitParams, "recverName", row.orgFullname);
      } else if (fromFlag === "dftSndBrno") {
        this.$set(this.submitParams, "dftSndBrno", row.bankCode);
        this.$set(this.submitParams, "dftSndName", row.orgFullname);
      } else if (fromFlag === "dftOwnerAccBrno") {
        this.$set(this.submitParams, "dftOwnerAccBrno", row.bankCode);
        this.$set(this.submitParams, "dftOwnerAccName", row.orgFullname);
      }
    },

    checkbankcode(fromFlag) {
      if (fromFlag === "recver") {
        let recver = this.submitParams.recver;
        getBankInfByBankCode(recver)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "recver", response.result.bankCode);
              this.$set(this.submitParams, "recverName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "recverName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "recverName", null);
          });
      } else if (fromFlag === "dftSndBrno") {
        let dftSndBrno = this.submitParams.dftSndBrno;
        getBankInfByBankCode(dftSndBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "dftSndBrno", response.result.bankCode);
              this.$set(this.submitParams, "dftSndName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "dftSndName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "dftSndName", null);
          });
      } else if (fromFlag === "dftOwnerAccBrno") {
        let dftOwnerAccBrno = this.submitParams.dftOwnerAccBrno;
        getBankInfByBankCode(dftOwnerAccBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "dftOwnerAccBrno", response.result.bankCode);
              this.$set(this.submitParams, "dftOwnerAccName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "dftOwnerAccName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "dftOwnerAccName", null);
          });
      }
    },
  },
};
</script>
